<template>
  <div class="container">
    <div class="honor-page">
      <div class="search">
        <div class="box">
          <div class="content">
            <textarea class="input-item" v-model="honor" placeholder="请输入内容"></textarea>
          </div>
          <div class="button">
            <div class="btn" @click="addHonor">{{ honorText }}</div>
            <div class="btn" v-if="honorStatus == 2" @click="cancelEdit">取消</div>
          </div>
        </div>
      </div>
      <div class="body">
        <ul class="list" v-if="honors.length > 0">
          <li class="item" v-for="(item, index) in honors" :key="index" @click="honorIndex = index">
            <div class="title">{{ index + 1 }}、</div>
            <div class="content">{{ item.text }}</div>
            <div class="del" v-if="honorIndex == index">
              <div class="icon" @click.stop="editHonor(index)">
                <image class="image" src="/static/images/icon/edit.png" alt=""/>
                <div class="text">编辑</div>
              </div>
              <div class="icon" @click.stop="delHonor(index)">
                <image class="image" src="/static/images/icon/delete.png" alt=""/>
                <div class="text">删除</div>
              </div>
            </div>
          </li>
        </ul>
        <div class="data-empty" v-else>
          <image class="icon-empty" src="/static/images/icon/empty.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      /*
       * @param    honorIndex        荣誉下标
       * @param    honor             荣誉内容
       * @param    honors            荣誉列表
       * @param    honorStatus       荣誉状态 1、新增  2、编辑
       * @param    honorId           荣誉ID
       */
      honorIndex: 0,
      honor: '',
      honorStatus: 1,
      honorText: '新增荣誉',
      honorId: '',
      userInfo: wx.getStorageSync('userInfo'),
    }
  },

  onShareAppMessage (res) {
    let self = this;
    let url = `${self.$confs.shareUrl}?id=${self.userInfo.id}`;
    return {
      title: self.$confs.shareTitle,
      path: url,
    }
  },

  computed: {
    honors () {
      return this.$store.state.honorList;
    },
  },

  methods: {
    /*
     * 新增/编辑荣誉
     */
    addHonor () {
      let self = this;
      if (!this.honor) {
        this.$modal.show('内容不能为空');
        return;
      }
      let params = {
        member_id: this.userInfo.id,
        text: this.honor,
      };
      if (this.honorStatus === 2){
        params.id = this.honorId;
      }
      this.$toast.show();
      this.$axios.addHonor(params).then((res) => {
        self.$toast.hide();
        let text = this.honorStatus === 2 ? '修改成功' : '添加成功';
        self.$modal.show(text);
        self.cancelEdit();
        let data = res.data;
        if (0 === data.code * 1) {
          self.getHonor();
        }
      });
    },
    /*
     * 编辑荣誉
     */
    editHonor (index) {
      this.honorStatus = 2;
      this.honorText = '保存荣誉';
      this.honorId = this.honors[index].id;
      this.honor = this.honors[index].text;
    },
    /*
     * 取消编辑荣誉
     */
    cancelEdit () {
      this.honorStatus = 1;
      this.honorText = '新增荣誉';
      this.honorId = '';
      this.honor = '';
    },
    /*
     * 获取荣誉
     */
    getHonor () {
      let self = this;
      this.$toast.show();
      this.$axios.getHonor({
        id: self.userInfo.id
      }).then((res) => {
        self.$toast.hide();
        let data = res.data;
        if (0 === data.code * 1) {
          self.$store.dispatch('getHonorList', data.data);
        }
      });
    },
    /*
     * 删除荣誉
     */
    delHonor (index) {
      let self = this;
      this.$modal.show({
        content: '是否确认删除荣誉？',
        success (res) {
          if (res.confirm) {
            self.$toast.show('删除中...');
            self.$axios.delHonor({
              id: self.honors[index].id
            })
            .then((res) => {
              self.$toast.hide();
              if (0 === res.data.code * 1) {
                self.getHonor();
              }
            });
          }
        },
      });
    },
  },

  mounted () {
    this.getHonor();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
